<template>
  <div>
        <!-- 操作部分 -->
        <div class="main-top">
            <ul class="rowlist" v-permission="'/button'">
          <li>
            <el-button
              @click="allclose"
              size="small"
              v-permission="'/button'"
              type="primary"
            >全关模式</el-button>
          </li>
          <li>
            <el-button
            @click="festival"
              size="small"
              v-permission="'/button'"
              type="primary"
             
            >节日模式</el-button>
          </li>
          <li>
            <el-button
            @click="setscenario"
              size="small"
              v-permission="'/button'"
              type="primary" 
            >情景模式</el-button>
          </li>
          <li>
            <el-button
            @click="addallmode"
              size="small"
              v-permission="'/button'"
              type="primary" 
            >添加指令</el-button>
          </li>
          <li>
            <el-button
            @click="setdatamode"
              size="small"
              v-permission="'/button'"
              type="primary" 
            >执行数据库指令</el-button>
          </li>
        </ul>
        </div>
        <!-- 数据部分 -->
        <div class="mainbox" style="background-color:#0b1339;border:1px solid #60b6f1">
          <p style="margin: 10px;height:20px">
            <span v-if="devmode == ''"> 当前模式:未知</span>
            <span v-else> 当前模式:<span style="color: aquamarine;">{{ devmode }}</span></span>
           
          </p>


          <div v-if="modeshow" style="font-size:14px;padding:60px;text-align:center;position:absolute;left:45%;top:30%;background:#fff;width:300px;height:220px;color:black">
            <div>qos</div>
            <div>
              <el-select v-model="modeqos" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select></div>
            <div  style="margin-top: 20px;">标题<el-input  maxlength="15" show-word-limit v-model="modetopic" placeholder="请输入"></el-input></div>
            <div style="margin-top: 20px;">信息<el-input maxlength="38" show-word-limit v-model="modemessage" placeholder="请输入"></el-input></div>
            <div style="margin-top: 20px;">
              <el-button @click="cancelmodeshow  ()">取消</el-button>
              <el-button @click="suremode()" type="primary">确认</el-button></div>
          </div>
<!-- 
        <el-table
          size="mini"
          :default-sort="{prop: 'date', order: 'descending'}"
          ref="multipleTable"
          :data="lamplist"
          :header-cell-style="{'text-align':'center',background: '#111A43',color:'#fff'}"
          :cell-style="{'text-align':'center',background: '#111A43',color:'#fff'}"
          tooltip-effect="dark"
          style="width: 100%;background-color: #111A43;color:'#fff'"
          @selection-change="handleSelectionChange"
        >
        </el-table> -->
        </div>
  </div>
</template>

<script>
import {
  setdatamode,
  addmode,
  getmode,
  setallclose,
  setscenario,
  setfestival,
  getTimes,
  setTimes,
  setcontrol,
  getdevlist,
  getcontrollist,
} from "@/request/api";
import { successmsg, failmsg } from "../../tools/tools";

// import forms from "./components/form.vue";
import axios from "axios";
import { color } from "echarts";


export default {
  components: {
    // forms
  },
  data() {
    return {
      // 指令数据
      modeqos: '',
      modetopic: '',
      modemessage: '',
      options: [{
          value: '1',
          label: '1'
        }, {
          value: '2',
          label: '2'
        }, {
          value: '3',
          label: '3'
        },],
        // 指令弹框
      modeshow: false,
      // 设备模式
      devmode: '',
      lamplist:[{num1:"000",num2:0,num3:0,num4:0}],
      userinfo: {}, //用户信息
      i: false,
      socket: null,
      device: {}
    };
  },
  created() { },
  mounted() {
    this.getmode();
    // 获取集控器列表
    // this.getconlist();
    // this.getDeviceList()
  },

  methods: {
    // 确认设置指令
    suremode() {
      addmode({  
        qos: this.modeqos,
        topic: this.modetopic,
        message: this.modemessage 
      }).then(d => {
        if (d.code == '0000') {
          successmsg(d.message)
          this.modeshow = false
          // this.getmode()
        }
      })
    },
    // 添加指令弹框
    addallmode() {
      this.modeshow = true
    },
    cancelmodeshow() {
      this.modeshow = false 
    },
    // 获取模式
    getmode() {
      getmode().then(d => {
        if (d.code == '0000') {
          this.devmode = d.data
        }
      })
    },

    // 执行数据库指令
    setdatamode() {
      setdatamode().then(d => {
        if (d.code == '0000') {
          successmsg(d.message)
        }
      })
    },
    // 情景模式
    setscenario() {
      setscenario().then(d => {
        if (d.code == '0000') {
          successmsg(d.message)
        }
      })
      // console.log(this.concode)  ;
    },

    // 节日模式
    festival() {
      setfestival().then(d => {
        if (d.code == '0000') {
          successmsg(d.message)
        }
      })
      // console.log(this.concode)  ;
    },
    // 全关模式
    allclose() {
      setallclose().then(d => {
        if (d.code == '0000') {
          successmsg(d.message) 
        } 
      })
      // console.log(this.concode)  ;
    },
     // 不在线的全不可选
     selectHandle(row, index) {
      // console.log(row,'1111');
      return !(row.online !== 1);
    },
    handleSelectionChange(){

    },
    // 获取时间
    getTime(){
      if(!this.concode){
        this.concode = this.conlists[0].code
        this.conline = this.conlists[0].onlineStatus
      }
      getTimes({code:this.concode}).then(d=>{
        if(d.code == '0000'){
          this.value1 = d.data.openTime
          this.value2 = d.data.closeTime
        }
      })
    },
  
    // 刷新
    refreshdev(){
      this.getdevlist(this.concode);
    },
    //控制
    closetime(){
      clearInterval(this.timers)
    },
    // 点列表
    readinfo(num,online) {
      this.conline = online
      // console.log(online);
      this.concode = num
      this.getdevlist(num)
      this.getTime()
    },
    // 获取设备列表
    getdevlist(num) {
      // console.log(!num,'1');
      if (!num) {
        // console.log(this.conlists);
        num = this.conlists[0].code
      }else{
        num = this.concode 
      }
      // console.log(num);
      getdevlist({ "centralizedCode": num }).then(d => {
        if (d.code == '0000') {
          this.devlist = d.data
        }
      })
    },
    getDeviceList() {
      // 创建WebSocket 服务器
      const httpURL = axios.defaults.baseURL;
      const wsURL = httpURL.replace(/^http/, 'ws') + '/websocket';
      this.socket = new WebSocket(wsURL);

      // 监听 WebSocket 接收到消息事件
      this.socket.addEventListener("message", (event) => {
        // 处理接收到的 JSON 数据
        const newData = JSON.parse(event.data);
        this.device = newData;
        // console.log("接收到设备数据：", newData);

        // 遍历 devices 数组
        this.devlist.forEach((cabinet) => {
          const device = cabinet.deviceList.find((d) => d.id === newData.id);

          if (device) {
            // console.log("找到匹配的设备：", device.id);
            // 更新匹配的设备数据
            Object.assign(device, newData);
          }
        });
      });
    },

    // 获取集控器列表
    getconlist() {
      getcontrollist().then(d => {
        if (d.code == '0000') {
          // console.log(d);
          this.conlists = d.data
          this.getdevlist()
          this.getTime()
        }
      })
    },
    open(num) {
      // console.log(num);
      this.devid = num
      this.obj.isshow = true;
     
    },
    update() {
      this.isRresh = false;
      this.$nextTick(() => {
        this.devicedata.pageNum = this.pageNum;
        this.i = true;
        this.getdevlist(this.i);
        this.isRresh = true;
        this.loading = false;
      });
    },

    // 刷新数据
    reflshdata() {
      // this.loading = true;
      this.update();
      successmsg('刷新成功')
    },
  },

  beforeDestroy() {
    // 在组件销毁前关闭 WebSocket 连接
    this.socket.close();
  },
};
</script>

<style scoped>
.notonline {
  color: #333;
}

.online {
  color: greenyellow;
}

.main-top{
    width: 100%;
    margin-bottom:20px ;
    height: 80px;
    background: url('../../assets/image/maintop.png') #0b1339;
    background-repeat: no-repeat; 
    background-size: cover; 
}
/* 内容部分 */
.mainbox {
  width: 100%;
  height: calc(100vh - 220px);
  background: var(--bg-color);
  color: #fff;
  /* display: flex;
  flex-wrap: wrap;
  align-items: center;
 
  justify-content: left; */
}

/* 底部组件 */
/* 全部调光 */

/* 遮罩层 */

@keyframes p2 {
  100% {
    background-size: 110%;
  }
}

/* 景区列表宽度 */
/* .el-row .el-col {
  width: 229px;
} */

/* 按钮列表 */
.rowlist {
    padding-top:20px;
    padding-left: 20px;
    overflow: auto;
    display: flex;
    align-items: center;
}

.rowlist li {
  margin: 5px;
  width: 80px;
}

.rowlist el-input {
  width: 80px;
}

/* 导航栏宽度 */
.el-submenu .el-menu-item {
  width: 229px;
}

/* 移入变色 */
.el-submenu .el-menu-item:hover {
  background: skyblue !important;
  color: #fff !important;
}

/* 与主导航栏距离 */
.el-container {
  margin-left: -20px;
  padding: 0;
}

.el-aside {
  width: 229px;
  /* background-color: #fff; */
  text-align: left;
  height: calc(100vh - 130px);
  border-right: #999 solid 1px;
}

.el-main {
  height: calc(100vh - 130px);
  background: #0b1339;
  /* background-color: #fff; */
  color: #333;
}</style>
